Here we are going to use custom transitions to create a solid color swipe transition.

Custom transitions are functions . In the function we can return delay, duration, easing and css. We'll focus on css.

<script>
	let show = false;
</script>

<div>
	<label>
		<input bind:checked={show} type="checkbox" /> Show
	</label>
</div>

{#if show}
	<div>
		<span class="header">Hello world</span>
	</div>
	<div>
		<span class="text">Custom Transitions!</span>
	</div>
{/if}

<style>
	span {
		font-size: 20px;
	}
	.header {
		color: #ff3e00;
	}
	.text {
		color: #1f5389;
	}
</style>

We added a function that returns CSS. It is split into two parts, the first part from t 0-0.5 where the solid block covers the text and the text is hidden, after that the second part from t 0.5-1 where the solid block is leaving and revealing the text.